<template>
  <router-view v-slot="{ Component }" v-if="isShowView">
    <transition name="page-toggle" mode="out-in">
      <keep-alive :include="keepAliveList" :max="80">
        <component :is="Component" :key="$route.name"/>
      </keep-alive>
    </transition>
  </router-view>
</template>

<script>
import { mapState } from 'vuex'
import { findIndex } from 'lodash'
import { childRouter } from '@/router/baseRouter'
export default {
  name: 'baseView',
  data () {
    return {
      noCacheList: ['sysStaffDetail', 'makeDetails', 'makeProcess', 'routeChartList']
    }
  },
  computed: {
    ...mapState({
      enabledKeepAlive: (state) => state.setting.enabledKeepAlive,
      isShowView: (state) => state.setting.isShowView,
      tabs: (state) => state.setting.tabs,
    }),
    key () {
      let { fullPath, meta = {} } = this.$route
      let { keepAliveKey = fullPath } = meta
      return keepAliveKey
    },
    keepAliveList () {
      let list = childRouter
        .filter((item) => !this.noCacheList.includes(item.name) && findIndex(this.tabs, (i) => i.path == item.path) >= 0)
        .map((item) => item.name)
      return list
    },
  },
}
</script>
